<template>
  <div class="search_container">
    <search-bar @openLoading="loading"></search-bar>
    <div class="loading" v-if="isloading">
        <img src="../../assets/icon/common/shuaxin.png" alt="" class="rr">
    </div>
    <search-list></search-list>
    <my-recommend v-if="isGood"></my-recommend>

    
  </div>
</template>

<script>
import {mapState} from "vuex"
import SearchBar from "@/views/search/SearchBar.vue";
import MyRecommend from "@/components/recommend/Recommend.vue";
import SearchList from "@/views/search/SearchList.vue";


export default {
  name: "Search",
  data() {
    return {
      isGood: false,
      list:[],
      isloading:false
    };
  },
  watch:{
    
    searchList(newValue,oldValue){
         this.isGood = false

        // 加载图片消失才显示
        if( this.isloading == false && newValue.length == 0){
            this.isGood = true
        }else{
            this.isGood = false
        }

        
    }
  },
  computed:{
      ...mapState('search',['searchList'])
  },
  components: {
    SearchBar,
    MyRecommend,
    // GoodsItem,
    SearchList,
  },
  created(){
   
  },
  methods: {
    loading(val){
        this.isloading = val
    }
  },
  mounted() {
    document.querySelector("body").style.backgroundColor = "#fff";
  },
  destroyed(){
    document.querySelector("body").style.backgroundColor = "#f5f5f5";
  }
};
</script>

<style lang="scss" scoped>




.rr{
    animation: rotato 2s linear infinite;
}

@keyframes rotato{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
.loading{
    text-align: center;
    margin-top: 40px;
}

</style>



